import React, { useState, useEffect, FC } from 'react';
import axios from 'axios';
import {useNavigate} from 'react-router-dom'
import { Item } from "../utils/types"
import 'moment/locale/zh-cn'
const moment = require('moment')
interface IAppProps extends Item {

}

const App: FC<IAppProps> = () => {
    const [data, setData] = useState([]);
    const navigate=useNavigate()
    useEffect(() => {
        axios.get('/api/knowledge').then((res) => {
            console.log(res.data.data);
            setData(res.data.data[0])
        })
    }, [])
    const goDesc=(item:any)=>{
        navigate(`/desc/${item.id}`,{
            state:{
                item
            }
        })
    }

    return (
        <div>
            <h4><b>推荐阅读</b></h4>
            {
                data ? data.map((item: Item, index: number) => {
                    return <ul key={index}>
                        <li onClick={()=>goDesc(item)}>{item.title} · <span>{moment().startOf('day').fromNow()}</span></li>
                    </ul>
                })
                    : '暂无数据'

            }
        </div>
    )
};

export default App
